{% load staticfiles %}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        h1{
	text-align: center;
	margin-top: 100px;
	font-size: 40px;
	color: #5EBBEA;
	text-shadow:2px 2px 2px #90DDEF;
	font-weight: normal;
}

body{
	background-color: #EAEAEA;
	font-family: "微软雅黑",Arial,Verdana,Sans-serif;
	text-align: center;
	margin: 0 auto;
}

div{
	display: block;
}

.login-user,.login-pwd,.login-other,.login,.login-pwd2{
	position: relative;
	margin: 0 auto;
	width: 360px;
	height: 50px;
	margin-bottom: 12px;
}

.label-user,.label-pwd{
	position: absolute;
	top: 16px;
	left: 10px;
}

.label-check{
	float: left;
	font-size: 14px;
	margin-left: -5px;
}

.user,.pwd,button{
	width: 100%;
	height: 100%;
	padding: 0px 25px;
	box-sizing: border-box;
}

.pwd-forget{
	text-decoration: none;
	float: right;
	font-size: 14px;
	color: #5EBBEA;
	margin-right: -4px;
}

button{
	border:none;
	color: #ffffff;
	font-size: 16px;
	border-radius: 3px;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}

button:hover{
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}

button:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
    </style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/font-awesome.min.css' %}">
<script type="text/javascript" src="{% static 'js/unit.js' %}">

</script>
    <title>注册</title>
</head>
<body>
{% if error %}
    <h3>{{ error }}</h3>
{% endif %}
    <h1>企业考勤管理系统</h1>
    <form method="post" action="/user/register/" class="login-form">
        {% csrf_token %}
	    <div class="login-user">
	    	<label class="label-user"><i class="fa fa-user"></i></label>
	    	<input type="text" name="user" placeholder="请输入用户名/工号/邮箱" class="user">
	    </div>
	    <div class="login-pwd">
	    	<label class="label-pwd"><i class="fa fa-lock"></i></label>
	    	<input type="password" name="password" placeholder="请输入密码" class="pwd">
	    </div>
        <div class="login-pwd">
	    	<label class="label-pwd"><i class="fa fa-lock"></i></label>
	    	<input type="password" name="password2" placeholder="请重新输入密码" class="pwd">
	    </div>
	    <div class="login">
            <input type="submit" value="注册">
	    </div>
    </form>
</body>